import {Component, useState} from 'react';
import {Card, Button, Modal} from 'antd';
import {CheckCircleOutlined} from '@ant-design/icons';
import style from './ToolCard.scss';

const ToolCard = props => {
    const {name, icon, description, components} = props;

    const [modalVisible, setModalVisible] = useState(false);

    const handleModalOk = () => {
        setModalVisible(false);
    };

    const handleModalCancel = () => {
        setModalVisible(false);
    };

    const handleEnterButtonClick = () => {
        setModalVisible(true);
    };

    return (
        <Card
            key={name}
            style={{width: 300, margin: 16}}
            cover={
                <div className={`${style['icon']}`}>
                    <div className='icon'>{icon}</div>
                </div>
            }
            actions={[
                <Button
                    type='primary'
                    key={name}
                    onClick={handleEnterButtonClick}>
                    进入
                </Button>,
            ]}>
            <Card.Meta
                title={name}
                description={description}
            />
            <Modal
                title={name}
                visible={modalVisible}
                onOk={handleModalOk}
                onCancel={handleModalCancel}
                width={1200}>
                {components}
            </Modal>
        </Card>
    );
};

export default ToolCard;
